<template>
  <view class="dy-scroll-container">
    <dy-navbar title="搜索框" />
    <scroll-view class="dy-scroll" scroll-y="">
      <dy-card>
        <dy-section slot="title">基础用法</dy-section>
        <template slot="body">
          <dy-search v-model="demo1" />
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title">自定义Icon</dy-section>
        <template slot="body">
          <dy-search v-model="demo2" />
          <dy-search v-model="demo2" :search-icon-style="{ fontSize: '50rpx' }" />
          <dy-search
            v-model="demo2"
            search-icon="camera"
            :search-icon-style="{ fontSize: '50rpx', color: 'blue' }"
          />
          <dy-search
            v-model="demo2"
            search-icon="camera"
            search-icon-position="right"
            :search-icon-style="{ fontSize: '50rpx', color: 'blue' }"
          />
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title">左侧文本</dy-section>
        <template slot="body">
          <dy-search v-model="demo3" search-label="珠海" />
          <dy-search
            v-model="demo3"
            search-label="珠海"
            :search-label-style="{ color: '#ff508a' }"
          />
          <dy-search
            v-model="demo3"
            search-label="珠海"
            search-icon-position="right"
            :search-icon-style="{ fontSize: '50rpx', color: 'blue' }"
            :search-label-style="{ color: '#ff508a', fontSize: '36rpx' }"
          />
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title">右侧文本</dy-section>
        <template slot="body">
          <dy-search v-model="demo4" action-text="搜索" show-action />
          <dy-search
            v-model="demo4"
            action-text="搜索"
            :action-style="{ color: 'blue' }"
            show-action
          />
          <dy-search
            v-model="demo4"
            show-action
            search-label="珠海"
            action-text="搜索"
            search-icon-position="right"
            :search-icon-style="{ fontSize: '50rpx', color: 'blue' }"
            :action-style="{ color: 'blue', fontSize: '36rpx' }"
          />
        </template>
      </dy-card>

      <dy-card>
        <dy-section slot="title">背景颜色</dy-section>

        <template slot="body">
          <dy-search
            v-model="demo7"
            search-label="dyend-app"
            :search-label-style="{ color: '#ff508a' }"
            search-icon-color="#ffffff"
            show-action
            background="#e5e5e5"
            color="#ff508a"
            action-text="搜索"
            placeholder="提示文字"
            placeholder-style="color: #ffffff"
            @focus="handleClean"
          />
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      demo1: '',
      demo2: '',
      demo3: '',
      demo4: '',
      demo5: '',
      demo6: '',
      demo7: '',
      demo8: '',
      demo9: '',
      demo10: '',
      demo11: '',
      demo12: '',
      demo13: ''
    }
  },
  methods: {
    handleClean() {
      this.demo7 = ''
    }
  }
}
</script>

<style>
.dy-w-100P {
  margin-bottom: 8px;
}
</style>
